<template>
  <div class="dashboard-container">
    <div id="base">
      <div class="box product">
        <p>
          <span>我测试的产品</span>
        </p>
        <div class="sum">
          <div class="square num">10</div>
          <div class="detail">
            <div class="leftbox">
              <span>自主</span>
              <span>创建</span>
              <span class="number">7</span>
            </div>
            <div class="rightbox">
              <span>参与</span>
              <span>测试</span>
              <span class="number">3</span>
            </div>
          </div>
        </div>
        <div class="statistics">
          <span>完成率</span>
          <span>100%</span>
          <div class="test">
            <div class="leftbox">
              <span>进行中</span>
              <span class="distance">未测试</span>
              <span class="distance">已测试</span>
            </div>
            <div class="rightbox">
              <span>0</span>
              <span class="distance">0</span>
              <span class="distance">10</span>
            </div>
          </div>
        </div>
      </div>

      <div class="box total">
        <p>
          <span>用例库</span>
        </p>
        <div class="sum">
          <div class="square num">50</div>
          <div class="detail">
            <div class="leftbox">
              <span>接口</span>
              <span>用例</span>
              <span class="number">50</span>
            </div>
            <div class="rightbox">
              <span></span>
              <span></span>
              <span class="number"></span>
            </div>
          </div>
        </div>
        <div class="statistics">
          <span>通过率</span>
          <span>100%</span>
          <div class="test">
            <div class="leftbox">
              <span>未执行</span>
              <span class="distance">已通过</span>
              <span class="distance">未通过</span>
            </div>
            <div class="rightbox">
              <span>0</span>
              <span class="distance">50</span>
              <span class="distance">0</span>
            </div>
          </div>
        </div>
      </div>

      <div class="box task">
        <p>
          <span>测试任务</span>
        </p>
        <div class="sum">
          <div class="square num">20</div>
          <div class="detail">
            <div class="leftbox">
              <span>已完成</span>
              <span class="number">20</span>
            </div>
            <div class="rightbox">
              <span>正在</span>
              <span>执行</span>
              <span class="number">0</span>
            </div>
          </div>
        </div>
        <div class="statistics">
          <span>完成率</span>
          <span>50%</span>
          <div class="test">
            <div class="leftbox">
              <span>成功</span>
              <span class="distance">失败</span>
            </div>
            <div class="rightbox">
              <span>10</span>
              <span class="distance">10</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="chart">
      <echarts></echarts>
    </div>
  </div>
</template>

<script lang="ts">
import "@/styles/index.less";
import { Component, Vue } from "vue-property-decorator";
import { UserModule } from "@/store/modules/user";
import Echarts from "@/components/charts";

@Component({
  name: "backHome",
  components: {
    echarts: Echarts
  }
})
export default class extends Vue {
  get userInfo() {
    return UserModule;
  }
  mounted () {
    console.log("系统用户所有路由",this.$router)
  }
}
</script>

<style lang="less" scoped>

.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
#base {
  display: flex;
  justify-content: space-around;
  .box {
    width: 280px;
    height: 280px;
    border: 1px solid #333;
    .detail,
    .test {
      // background-color: darkcyan;
      display: flex;
      flex-direction: initial;
      .leftbox,
      .rightbox {
        border-right: 1px solid #333;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px;
      }
      .rightbox {
        border-right: none;
        margin-right: 8px;
      }
    }
    .test {
      .leftbox,
      .rightbox {
        border-right: none;
      }
    }
    .number {
      display: block;
      margin-top: 10px;
      font-weight: 700;
      font-size: 20px;
    }
    .distance {
      margin-top: 10px;
    }
  }
  .product,
  .total,
  .task {
    // background-color: yellowgreen;
    padding: 10px;
    .sum {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 10px;
      .square {
        width: 100px;
        height: 100px;
        line-height: 100px;
        border: 1px solid #333;
      }
      .num {
        // background-color: cornflowerblue;
        border-radius: 50%;
        text-align: center;
        font-size: 32px;
        font-weight: 700;
      }
    }
    .statistics {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  .task {
    .leftbox {
      justify-content: space-between;
    }
  }
}
.chart {
  padding: 50px;
  width: 100%;
  height: 397px;
  box-sizing: border-box;
}
</style>
